import {
    createRouter,
    createWebHashHistory
} from 'vue-router'
import store from '@/store'
// 布局组件
import Layout from '@/views/Layout'
// 首页
import Home from '@/views/home/index'
// 分类组件
import Category from '@/views/category'
import SubCategory from '@/views/category/sub'
// 商品详情组件
import Goods from '@/views/goods'
// 登录
import Login from '@/views/login/index'
// QQ登录后的回调页面
import LoginCallback from '@/views/login/callback'
// 购物车页面
import Cart from '@/views/cart'
// 结算页面
import Checkout from '@/views/member/pay/checkout'
// 支付页面
import Pay from '@/views/member/pay/index'
// 支付成功的回调页
import PayCallbackResult from '@/views/member/pay/callbackResult'

// 个人中心的布局容器
import MemberLayout from '@/views/member/user/Layout'

// 个人中心首页
import MemberIndex from '@/views/member/user/index'

// 订单列表页
import OrderList from '@/views/member/order/index'
// 订单详情页
import OrderDetail from '@/views/member/order/detail'
/* import {
    h
} from 'vue'
 */
// 配置路由的数组
const routes = [{
        path: '/',
        component: Layout,
        children: [
            // 首页
            {
                path: '/',
                component: Home
            },
            {
                path: '/cate/:id',
                component: Category
            },
            {
                path: '/cate/sub/:id',
                component: SubCategory
            },
            {
                path: '/product/:id',
                component: Goods
            },
            {
                path: '/cart',
                component: Cart
            }, {
                path: '/member/checkout',
                component: Checkout
            },
            {
                path: '/member/pay',
                component: Pay
            }, {
                path: '/pay/callback',
                component: PayCallbackResult
            },
            {
                // 个人中心的布局容器布局
                path: '/member',
                component: MemberLayout,
                children: [
                    // 个人中心首页
                    {
                        path: '/member',
                        component: MemberIndex
                    },
                    // 订单列表
                    {
                        path: '/member/order',
                        component: OrderList
                    },
                    {
                        path: '/member/order/:orderId',
                        component: OrderDetail
                    }

                ]
            }
        ]
    },
    {
        path: '/login',
        component: Login
    },
    {
        path: '/login/callback',
        component: LoginCallback
    }
]
const router = createRouter({
        // 精准激活时的样式
        linkExactActiveClass: 'active',
        history: createWebHashHistory(),
        routes,
        scrollBehavior() {
            // 路由进行切换时始终滚动到顶部
            return {
                top: 0
            }
        }
    })
    // 路由导航守卫
router.beforeEach((to, from, next) => {
    // 凡是以 member开头的路由地址都需要做登录
    if ((!store.state.user.profile.token) && to.path.startsWith('/member')) {
        next({
            path: '/login',
            query: {
                redirectUrl: encodeURIComponent(to.fullPath)
            }
        })
    }
    next()
})

export default router